<template>
  <div class="user_vip">
      <vip-swiper></vip-swiper>
      <div  class="upgrade">
          <div class="up_td">
              <div class="up_td_left">升级会员要求</div>
              <div class="up_td_right">
                  <span style="color:#ffaa29;">2</span>
                  <span>/</span>
                  <span>2</span>
              </div>
          </div>
          <div class="up_dd">
              <div class="up_dd_item">
                  <div class="ui_td">
                      <div class="rr_r">
                          消费满100元
                      </div>
                      <div class="rr_y">
                          已满足条件
                      </div>
                  </div>
                  <div class="ui_bar">
                      
                  </div>
                  <div class="ui_num">
                      <span style="color:#ffaa29;">100</span>
                      <span style="color:#999;">/</span>
                      <span style="color:#999;">100</span>
                  </div>
              </div>
              <div class="up_dd_item">
                  <div class="ui_td">
                      <div class="rr_r">
                          满足积分100分
                      </div>
                      <div class="rr_y">
                          已满足条件
                      </div>
                  </div>
                  <div class="ui_bar">
                      
                  </div>
                  <div class="ui_num">
                      <span style="color:#ffaa29;">100</span>
                      <span style="color:#999;">/</span>
                      <span style="color:#999;">100</span>
                  </div>
              </div>
          </div>
      </div>
      <my-recommend></my-recommend>
  </div>
</template>

<script>
import VipSwiper from "@/views/user/vip/HeaderSwiper.vue"
export default {
    name:"UserVip",
    components:{
        VipSwiper,
    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.upgrade{
    background-color: #fff;
    margin-bottom: 11px;
    .up_td{
        height: 49px;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        .up_td_left{
            color: #282828;
            font-size: 16px;
            line-height: 49px;
            &::before{
                content: '';
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                background: url(../../../assets/icon/user/vip_huangguan.svg) no-repeat;
                background-size: 100% 100%;
                margin-right: 7px;

            }
        }
        .up_td_right{
            line-height: 49px;
            span{
                vertical-align: top;
                font-size: 14px;
            }
        }
    }

    .up_dd{
        padding:0px 15px 15px ;
        .up_dd_item{
            width: 100%;
            height: 92px;
            border-radius: 8px;
            background-color: #f9f9f9;
            padding-top: 6px;
            margin-bottom: 10px;
            .ui_td{
                height: 30px;
                line-height: 30px;
                display: flex;
                padding-right:10px ;
                
                justify-content: space-between;
                .rr_r{
                    color: #282828;
                    font-size: 15px;
                    font-weight: 700;
                    &::before{
                        
                        content: '';
                        display: inline-block;
                        width: 3px;
                        height:18px;
                        background-color: #ffaa29;
                        vertical-align: middle;
                        margin-right: 7px;
                    }
                }
                .rr_y{
                    font-size: 14px;
                    font-weight: 500;
                    color: #999;
                }
            }

            .ui_bar{
                width: 93%;
                height: 6px;
                border-radius:3px;
                background-color: #ffaa29;
                margin: 9px auto;
            }

            .ui_num{
                width: 93%;
                font-size: 13px;
                text-align: right;
                 margin: 0 auto;
            }
        }
    }
}
/deep/.no_good{
    display: none;
}
</style>

